<template>
  <el-form-item
    v-for="(item, index) in props.searchColumns"
    :key="index"
    class="item"
    :class="'item' + (index + 1)"
    :style="{ width: item.labelWidth + 210 + 'px' }"
    :label-width="item.labelWidth + 'px'"
  >
    <template #label>
      <div class="label" :class="item.label.length > 5 ? 'long-text' : ''">
        {{ item.label + '：' }}
      </div>
    </template>
    <el-input
      v-if="item.el === 'Input'"
      v-model="props.form[item.bind]"
      placeholder="请输入"
      maxlength="50"
      clearable
    ></el-input>
    <!--  -->
    <pub-dict-select
      v-if="item.el === 'DictSelect'"
      v-model="props.form[item.bind]"
      :isFilterAble="item.filterable"
      :clearable="item.clearable"
      :dict-code="item.code"
      placehoder="请选择"
      @change="changeSelect"
    ></pub-dict-select>
    <pub-dict-select-miltiple
      v-if="item.el === 'DictSelectMiltiple'"
      v-model="props.form[item.bind]"
      :dict-code="item.code"
      placehoder="请选择"
    ></pub-dict-select-miltiple>
    <!-- select -->
    <el-select
      v-if="item.el === 'Select'"
      v-model="props.form[item.bind]"
      clearable
    >
      <el-option
        v-for="i in item.options"
        :key="i.id"
        :label="i.name"
        :value="i.id"
      />
    </el-select>
    <!-- 日期范围 --> 
    <date-range-select
      v-if="item.el === 'DateRange'"
      v-model:begin="props.form[item.bindBegin]"
      v-model:end="props.form[item.bindEnd]"
      :comType="item.comType"
      :valueFormat="item.valueFormat"
    ></date-range-select>
    <!-- 日期 -->
    <el-date-picker
      v-if="item.el === 'Date'"
      v-model="props.form[item.bind]"
      :type="item.type"
      :value-format="item.valueFormat"
      placeholder="请选择"
      :clearable="true"
    />
    <!--  -->
    <age-range-select
      v-if="item.el === 'AgeRange'"
      v-model:begin="props.form[item.bindBegin]"
      v-model:end="props.form[item.bindEnd]"
      :min="item.min"
      :max="item.max"
    ></age-range-select>
    <!--  -->
    <area-cascader-search
      v-if="item.el === 'AreaSelect'"
      :disabledLevel="item.disabledLevel"
      :maxLevel="item.maxLevel"
      v-model:areaCode="props.form[item.bind]"
      :defaultArea="item.defaultArea"
    ></area-cascader-search>
    <!-- 接口获取数据 select -->
    <dynamicSelect
      v-if="item.el === 'DynamicSelect'"
      v-model="props.form[item.bind]"
      :params="item.params"
      :com-type="item.comType"
      :first-value='item.firstValue'
      :clearable="item.clearable"
    />
    <!-- orgSelect -->
    <orgSelect
      v-if="item.el === 'OrgSelect'"
      v-model:value="props.form[item.bind]"
    />
    <!-- orgSqSelectLazy -->
    <orgSqSelectLazy
      v-if="item.el === 'orgSqSelectLazy'"
      v-model:value="props.form[item.bind]"
    />
    <orgYLSelect
      v-if="item.el === 'orgYLSelect'"
      :key="orgYlSelectKyValue"
      v-model="props.form[item.bind]"
      :orgType="item.comType"
      :needSub="item.needSub"
    />
    <orgYLSelectLazy
      v-if="item.el === 'orgYLSelectLazy'"
      :key="orgYlSelectKyValue"
      v-model="props.form[item.bind]"
      :orgType="item.comType"
      :needSub="item.needSub"
    />
    <!-- 老人管理评估标准 -->
    <moneyRangeSelect
      v-if="item.el === 'moneyRangeSelect'"
      v-model:begin="props.form[item.bindBegin]"
      v-model:end="props.form[item.bindEnd]"
    />
    <!-- yearRangeSelect -->
    <year-range-select
      v-if="item.el === 'YearRangeSelect'"
      v-model:begin="props.form[item.bindBegin]"
      v-model:end="props.form[item.bindEnd]"
    />
  </el-form-item>
</template>
<script setup>
import orgSelect from '@/components/org-select2.vue'
import orgSqSelectLazy from '@/components/org-sq-select-lazy.vue'
import orgYLSelect from '@/components/org-select.vue'
import orgYLSelectLazy from '@/components/org-yl-select-lazy.vue'

const emit = defineEmits([ 'changeSelect'])
import {ref} from 'vue'
const props = defineProps({
  form: {
    type: Object,
    default() {
      return {}
    }
  },
  searchColumns: {
    type: Array,
    default() {
      return []
    }
  }
})
const orgYlSelectKyValue = ref('')

const changeSelect = obj =>{
  emit('changeSelect', obj)
}

const updateSelect = ()=>{
  console.log('更新成功');
  orgYlSelectKyValue.value = new Date().getTime()
}

defineExpose({updateSelect})
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
  :deep(.el-input) {
    width: 210px;
  }
  :deep(.el-range-editor) {
    //   width: 186px;
  }
  .age-range-select {
    width: 210px;
    display: inline-flex;
    align-items: center;
    :deep(.split) {
      font-size: 12px;
      color: #777;
      display: block;
      flex: 1;
      text-align: center;
    }
    :deep(.el-input-number) {
      width: 80px;
    }
  }
  :deep(.el-select) {
    width: 210px;
  }
  :deep(.el-cascader) {
    width: 210px;
  }
}
</style>
